$_gdm_bg: $system_base_color;
$_gdm_fg: $system_fg_color;
$_gdm_dialog_width: 25em;

// common style for login and lockscreen
.login-dialog,
.unlock-dialog {
  color: $_gdm_fg;

  .caps-lock-warning-label,
  .login-dialog-message-warning {
    color: $_gdm_fg;
  }

  .login-dialog-prompt-layout {
    width: $_gdm_dialog_width;
    spacing: $base_padding * 1.5;
  }
}

// GDM Login Dialog
// uses dark grey system styles
.login-dialog {
  .login-dialog-prompt-entry {
    @extend %system_entry;
  }
}

.login-dialog-bottom-button-group {
  padding: 32px;
  spacing: 16px;
}

// buttons on login screen
.login-dialog-button {

  &.a11y-button,
  &.cancel-button,
  &.switch-user-button,
  &.login-dialog-auth-menu-button,
  &.login-dialog-session-list-button,
  &.web-login-intro-button {
    @extend .icon-button;
    @extend %system_button;

    padding: to_em(16px);
  }

  &.cancel-button {
    padding: $base_padding * 1.5;
  }
}

.login-dialog-auth-menu-button-title {
  @include fontsize($base_font_size - 1);
  color: darken($_gdm_fg,40%);
  font-weight: bold;
  padding-top: $base_padding;
  padding-bottom: $base_padding * 2;
  padding-left: $base_padding * 2;
  padding-right: $base_padding * 2;
}

.login-dialog-auth-menu-button-popup-menu-box {
  padding: $base_padding * 3;
}

.login-dialog-auth-menu-button-item {
  padding-left: $base_padding * 2;
  padding-right: $base_padding * 2;
}

.login-dialog-button-box {
  spacing: $base_padding * 2;
}

.conflicting-session-dialog-content {
  spacing: 20px;

  .conflicting-session-dialog-title {
    text-align: center;
    @extend %title_2;
    margin-bottom: 5px;
  }

  .conflicting-session-dialog-desc {
    text-align: center;
  }

  .conflicting-session-dialog-desc-warning {
    text-align: center;
    // Yaru: use contrast-optimized color.
    color: $warning_caption_color;
    // Yaru: Use uniform aspect on dialog messages.
    // See: https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3897
    background-color: $warning_caption_bg_color;
    padding: $base_padding * 1.5;
    border-radius: $base_border_radius;
    margin: $base_margin 0;
  }
}

.login-dialog-menu-button-box {
  spacing: $base_padding * 2;
  padding-left: $base_padding * 2;
  padding-right: $base_padding * 2;
  padding-bottom: $base_padding * 2;
}

.login-dialog-logo-bin {
  margin: 3em 0;
}

.login-dialog-banner-view {
  max-width: $_gdm_dialog_width;

  .login-dialog-banner {
    color: darken($_gdm_fg,10%);
  }
}

.login-dialog-message {
  text-align: center;
}

.login-dialog-message-hint, .login-dialog-message {
  color: darken($_gdm_fg, 10%);
  min-height: 2.75em;
}

.login-dialog-user-selection-box {
  // padding to ensure the box doesn't overlap the panel
  padding-top: 4em;
  padding-bottom: 8em;
}

.login-dialog-not-listed-label {
  @extend %heading;
  padding: $base_padding;
}

.login-dialog-not-listed-button {
  // use button styling
  @extend %button_common;
  @include button(normal, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);
  &:focus { @include button(focus, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
  &:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
  &:active { @include button(active, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}

  padding: 0 $base_padding;
  margin: $base_padding;
}

// Authentication methods list
.login-dialog-auth-list-view {
  -st-vfade-offset: 3em;
}

.login-dialog-auth-list {
  spacing: $base_padding;
  margin-left: 2em;
}

.login-dialog-auth-list-title {
  margin-left: 2em;
  padding-bottom: $base_padding;
}

.login-dialog {
  .login-dialog-auth-list-item {
    @extend %button_common;
    @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
    &:selected,
    &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
    &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
    &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}

    border-radius: $modal_radius * 0.6;
    padding: $base_padding * 1.2;
  }
}

.unlock-dialog {
  .login-dialog-auth-list-item {
    @extend %lockscreen_button;

    border-radius: $modal_radius * 0.6;
    padding: $base_padding * 1.2;
  }
}

.login-dialog-auth-list-item {
  min-width: 300px;
}

.login-dialog {
  .login-dialog-auth-list-item {
    // Yaru: use button styling
    @extend %button_common;
    @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
    &:selected,
    &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
    &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
    &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true)};

    border-radius: $modal_radius;
    padding: $base_padding * 1.2;
  }
}

.unlock-dialog {
  // Yaru: use button styling
  .login-dialog-auth-list-item {
    @extend %lockscreen_button;

    border-radius: $modal_radius;
    padding: $base_padding * 1.2;
  }
}

.login-dialog-auth-list-label {
  @extend %title_4;
  &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
  &:rtl { padding-right: $base_padding * 2.5; text-align: right; }
}


// User list
.login-dialog-user-list-view {
  width: $_gdm_dialog_width;
  -st-vfade-offset: 3em;

  .login-dialog-user-list {
    margin: 0 $base_margin * 2; // margin to account for scrollbar
    spacing: $base_padding * 2;

    .login-dialog-user-list-item {
      // use button styling
      @extend %button_common;
      @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
      &:selected,
      &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
      &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
      &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}

      border-radius: $modal_radius;
      padding: $base_padding * 1.5;

      // create border for indicating logged in user
      .user-icon {
        border: 2px solid transparent;
      }

      .login-dialog-timed-login-indicator {
        height: 2px;
        margin-top: $base_padding;
        background-color: transparentize($_gdm_fg, .3);
      }

      &:logged-in {
        // color border for logged-in user
        .user-icon {
          border-color: -st-accent-color;
          StIcon {
            background-color: st-transparentize(-st-accent-color, .7);
          }
        }
      }
    }
  }
}

.login-dialog-prompt-layout {
  spacing: $base_padding * 2;
  min-width: 30em;
}

.login-dialog-prompt-entry {
  @extend %system_entry;
  border-radius: $base_border_radius + 3; // Yaru Change: Match Upstream button radius 
}

.web-login-dialog-content-overlay {
  background-color: transparentize($bg_color, 0.3);
  border-radius: $modal_radius;
  margin-bottom: 3em;
}

.web-login-spinner {
  color: $osd_fg_color;
  background-color: transparentize($osd_bg_color, 0.5);
  border: 5px transparent;
  border-radius: 50px;
}

.web-login-title-label {
  @include fontsize($base_font_size);
  color: if($variant =='dark', darken($fg_color, 30%), lighten($fg_color, 20%));
}

.web-login-url-label {
  @include fontsize($base_font_size);
  @extend %monospace;
  color: $fg_color;
  text-align: center;
}

.web-login-code-title-label {
  @include fontsize($base_font_size);
  color: $fg_color;
}

.web-login-code-label {
  @include fontsize($base_font_size);
  color: $fg_color;
  font-weight: bold;
}

.web-login-prompt {
  padding-top: $base_padding;
  padding-bottom: $base_padding;
  padding-left: $base_padding * 4.5;
  padding-right: $base_padding * 4.5;
  spacing: 1.75em;
  border-radius: $base_border_radius * 2;
}

.web-login-intro-button-label {
  @include fontsize($base_font_size + 5);
  color: $fg_color;
  height: 3em;
  text-align: center;
  font-weight: bold;
}

.web-login-intro-button {
  @include fontsize($base_font_size);
  color: $fg_color;
  height: 3em;
  text-align: center;
  border-radius: $base_border_radius * 4;
}

// Screen Shield
// a.k.a. the lockscreen, uses transparent styles
.unlock-dialog {
  background-color: transparent;

  .login-dialog-prompt-entry {
    @extend %lockscreen_entry;
    &:focus {
      // Yaru change: remove focus border
      box-shadow: none !important;
    }
  }

  .button,
  .icon-button {
    @extend %lockscreen_button;
  }
}

.screen-shield-background { // just the shadow, really
  background: black;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

#lockDialogGroup {
  background-color: $_gdm_bg;
}

// Clock
.unlock-dialog-clock {
  color: $_gdm_fg;
  spacing: 2em;

  .unlock-dialog-clock-time {
    @extend %numeric;
    @include fontsize(72pt);
    font-weight: 800;
  }

  .unlock-dialog-clock-date {
    @extend %title_1;
    font-weight: 400;
  }

  .unlock-dialog-clock-hint {
    margin-top: 2em;
    padding: $base_padding $base_padding * 3;
    border-radius: $base_border_radius * 2;
    font-weight: bold;
  }
}

// Notifications
#unlockDialogNotifications {
  > .vhandle, > .hhandle {
    background-color: transparentize($bg_color,0.7);
    &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
    &:active { background-color: st-transparentize(-st-accent-color,0.5); }
  }
}

.unlock-dialog-notifications-container {
  margin: $base_margin * 3;
  spacing: $base_padding;
  width: $_gdm_dialog_width;
  background-color: transparent;

  .summary-notification-stack-scrollview {
    padding-top: 0;
    padding-bottom: 0;
  }

  .message,
  .unlock-dialog-notification-source {
    padding: $base_margin * 3 $base_margin * 4;
    border: none;
    background-color: transparentize($_gdm_fg,0.9);
    color: $_gdm_fg;
    border-radius: $modal_radius;

    &.critical { background-color: transparentize($_gdm_fg,0.8) }
    &:active { background-color: transparentize($_gdm_fg,0.9); }

    & StButton {
         @extend %lockscreen_button;
         background-color: transparent;
         &:insensitive { background-color: transparent; opacity: 0.5; }
    }
    .message-header {
        color: $_gdm_fg;
    }
  }
}

.unlock-dialog-notification-icon {
  icon-size: $large_icon_size;
}

.unlock-dialog-notification-label {
  padding-left: $base_padding * 2;
  padding-right: 0;
  &:rtl { padding-right: $base_padding * 2; padding-left: 0; }
}

.unlock-dialog-notification-count-text {
  font-weight: bold;
  padding: 0 $base_padding * 2;
  color: $_gdm_fg;
  background-color: transparentize($_gdm_fg, .9);
  border-radius: $forced_circular_radius;
}

.login-dialog,
.unlock-dialog {

  // User Widget
  .user-widget {

    // common
    .user-widget-label {
      color: $_gdm_fg;
    }

    .user-icon {
      background-color: transparentize($_gdm_fg, .87);
      color: $_gdm_fg;

      @if $contrast == 'high' {
        background-color: transparentize($_gdm_fg, .7);
        box-shadow:inset 0 0 0 1px $hc_inset_color;
      }
    }

    // layout of the user list
    &.horizontal {
      spacing: $base_padding * 3;
      .user-widget-label {
        @extend %title_3;
      }
    }

    // layout of the login prompt
    &.vertical {
      spacing: $base_padding * 4;

      .user-widget-label {
        font-weight: 400;
        @include fontsize(20pt);
        text-align: center;
        margin-bottom: .75em;
      }

      .user-icon {
        icon-size: $base_icon_size * 10;

        & StIcon {
          padding: $base_padding * 5;
          color: $_gdm_fg; // Yaru change: dark/light theme support
        }
      }
    }
  }
}

// Login Failed banner
.auth-notification-banner {
  .message-header {
    width: 0px;
    height: 0px;

    .message-close-button {
      border: none;
      background-color: rgba(0, 0, 0, 0.0);
    }
  }
}

// QR Code
.qr-code {
  @if ($variant == 'light') {
    $qrcode_bg_color: mix($fg_color, $bg_color, 8%);
    background-color: $qrcode_bg_color;
    border-color: $qrcode_bg_color;
    color: $fg_color;
  } @else {
    background-color: $_gdm_fg;
    border-color: $_gdm_fg;
    color: $_gdm_bg;
  }
  border-radius: $base_border_radius * .5;
  border-width: 1em;
}

// Yaru change: style login dialog entry in dark theme
@if $variant=='dark' {
  login-dialog {
    StEntry {
      background-color: darken($system_bg_color, 3%);
      color: $fg_color;
      border-color: $system_borders_color;
    }
  }
}

// Yaru change: style unlock dialog with half-transparent items
.unlock-dialog {
  StEntry {
    border:none !important;
    &, &:focus {
      color: $fg_color_dark;
      background-color: transparentize($fg_color_dark, 0.9);
      box-shadow: none;
    }

    &:insensitive {
      color: transparentize($fg_color_dark, 0.5);
      background-color: transparentize($fg_color_dark, 0.95);
    }

    StLabel.hint-text {
      color: transparentize($fg_color_dark, 0.3);
    }
  }

  .cancel-button,
  .switch-user-button,
  .login-dialog-session-list-button {
    border-color: transparent;
    background-color: transparentize($fg_color_dark, 0.9);
    box-shadow: none;

    &,
    &:hover,
    &:focus,
    &:active {
      color: $fg_color_dark;
    }

    &:hover,
    &:focus {
      background-color: transparentize($fg_color_dark, 0.85);
    }

    &:active {
      background-color: transparentize($fg_color_dark, 0.80);
    }
  }
}
